<template>
    <view class="nav-bar-main" :style="{ height: navBarInfo.navbarHeight + 'px;' }">
        <view class="nav-bar-content" :style="{ height: navBarInfo.navbarHeight + 'px;', background: bgColor }">
            <view
                class="nav-bar-box"
                :style="{
                    top: navBarInfo.statusBarHeight + 'px;',
                    height: navBarInfo.titleHeight + 'px;'
                }">
                <view
                    v-if="!isBack"
                    class="nav-bar-title"
                    :style="{
                        height: navBarInfo.titleHeight + 'px;',
                        lineHeight: navBarInfo.titleHeight + 'px;'
                    }">
                    {{ props.title }}
                </view>
                <view
                    v-if="isBack"
                    class="nav-bar-back"
                    :style="{ height: navBarInfo.titleHeight + 'px;', lineHeight: navBarInfo.titleHeight + 'px;' }">
                    <view
                        class="back-img"
                        :style="{
                            paddingLeft: navBarInfo.navbarBtn.right + 'px;',
                            width: navBarInfo.navbarBtn.width + 'px'
                        }"
                        @click="goBack()">
                        <image class="img" :src="getImgOssUrl(props.iconUrl)"></image>
                    </view>
                    <view class="title" :style="{ color: fontColor }">{{ props.title }}</view>
                    <view :style="{ width: navBarInfo.navBarRight + 'px;' }"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getImgOssUrl } from '@/commons/utils.js';
import store from '@/store';
import router from '@/router';

const props = defineProps({
    title: {
        type: String,
        default: '商城'
    },
    isBack: {
        type: Boolean,
        default: false
    },
    bgColor: {
        type: String,
        default: '#ffffff'
    },
    fontColor: {
        type: String,
        default: '#ffffff'
    },
    back: {
        type: Function,
        default: null
    },
    iconUrl: {
        type: String,
        default: '/ui-prod-2.0.0/icon_back_1.2.png'
    }
});

const navBarInfo = store.useNavBarStore();

/**胶囊位置信息  */
const headerPosi = uni.getMenuButtonBoundingClientRect() || {};

if (!navBarInfo.statusBarHeight) {
    uni.getSystemInfo({
        success: function (res) {
            navBarInfo.statusBarHeight = res.statusBarHeight;
            navBarInfo.windowWidth = res.windowWidth;
        }
    });
}

if (!navBarInfo.navbarBtn.width) {
    navBarInfo.navbarBtn.height = headerPosi.height || 0;
    navBarInfo.navbarBtn.top = headerPosi.top - navBarInfo.statusBarHeight;
    navBarInfo.navbarBtn.bottom = headerPosi.bottom - headerPosi.height - navBarInfo.statusBarHeight;
    navBarInfo.navbarBtn.right = navBarInfo.windowWidth - headerPosi.right;
    navBarInfo.navBarRight = navBarInfo.windowWidth - headerPosi.right + headerPosi.width;
    navBarInfo.navbarBtn.width = headerPosi.width;
}

if (!navBarInfo.navbarHeight) {
    navBarInfo.navbarHeight = headerPosi.bottom + navBarInfo.navbarBtn.bottom;
}
navBarInfo.titleHeight = navBarInfo.navbarBtn.height + navBarInfo.navbarBtn.top + navBarInfo.navbarBtn.bottom; // 导航高度

const goBack = () => {
    if (props.back) {
        props.back();
    } else {
        router.navigateBack();
    }
};
</script>
<style lang="scss" src="./index.scss" scoped></style>
